<template>
  <!-- 机票筛选组件 -->
  <div class="filters">
    <el-row class="filters-top" type="flex" juctify="space-between" align="middle">
      <el-col :span="8">单程：{{info.departCity}} - {{info.destCity}} / {{info.departDate}}</el-col>
      <!-- 1.起飞机场 -->
      <el-col :span="4">
        <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="runFilters">
          <el-option
            v-for="(item,index) in options.airport"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>

      <!-- 2.起飞时间 -->
      <el-col :span="4">
        <el-select size="mini" v-model="flightTimes" placeholder="起飞时间" @change="runFilters">
          <el-option
            v-for="(item,index) in options.flightTimes"
            :key="index"
            :label="`${item.from}:00-${item.to}:00`"
            :value="`${item.from},${item.to}`"
          ></el-option>
        </el-select>
      </el-col>

      <!-- 3.航空公司 -->
      <el-col :span="4">
        <el-select size="mini" v-model="company" placeholder="航空公司" @change="runFilters">
          <el-option
            v-for="(item,index) in options.company"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>

      <!-- 4.机型选择 -->
      <el-col :span="4">
        <el-select size="mini" v-model="airSize" placeholder="机型" @change="runFilters">
          <el-option
            v-for="(item,index) in  airList"
            :key="index"
            :label="item.name"
            :value="item.size"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>

    <div class="filter-cancel">
      筛选:
      <el-button type="primary" round plain size="mini" @click="handleFiltersCancel">撤销</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //起飞机场
      airport: "",
      //起飞时间
      flightTimes: "",
      //航空公司
      company: "",
      //机型
      airSize: "",
      //自定义机型数据
      airList: [
        { size: "L", name: "大" },
        { size: "M", name: "中" },
        { size: "S", name: "小" }
      ]
    };
  },
  props: ["options", "flights", "info"],
  //方法
  methods: {
    //1.起飞机场筛选
    handleAirport(val) {
      console.log(val);
      //val传入进来的是当前选中的值
      //对数组进行筛选，使用过滤器（filter）
      //使用子组件传值触发父组件定义的函数
      //   const newList = this.flights.filter(res => {
      //     return res.org_airport_name == val;
      //   });
      //   this.$emit("toFliter", newList);
      //   console.log(this.newList);
    },
    //2.起飞机场筛选
    handleFlightTimes(val) {
      //筛选时间，大于开始时间，小于最终时间
      //   const newList = this.flights.filter(res => {
      //     const fromTime = val.split(",")[0];
      //     const toTime = val.split(",")[1];
      //     return (
      //       +res.dep_time.split(":")[0] > fromTime &&
      //       +res.dep_time.split(":")[0] < toTime
      //     );
      //   });
      //   this.$emit("toFliter", newList);
    },
    //3.航空公司筛选
    handleCompany(val) {
      console.log(val);
      //   const newList = this.flights.filter(res => {
      //     return res.airline_name == val;
      //   });
      //   this.$emit("toFliter", newList);
    },
    //4.机型筛选
    handleAirSize(val) {
      console.log(val);
      //   const newList = this.flights.filter(res => {
      //     return res.plane_size == val;
      //   });
      //   this.$emit("toFliter", newList);
    },
    //5综合筛选
    runFilters() {
      let newList = [...this.flights];

      //1.起飞机场筛选
      if (this.airport) {
        newList = newList.filter(res => {
          return res.org_airport_name == this.airport;
        });
      }
      //2.起飞机场筛选
      if (this.flightTimes) {
        newList = newList.filter(res => {
          const dep_time = Number(res.dep_time.split(":")[0]);
          const fromTime = Number(this.flightTimes.split(",")[0]);
          const toTime = Number(this.flightTimes.split(",")[1]);
          return dep_time >= fromTime && dep_time < toTime;
        });
      }
      //3.航空公司筛选
      if (this.company) {
        newList = newList.filter(res => {
          return res.airline_name == this.company;
        });
      }
      //4.机型筛选
      if (this.airSize) {
        newList = newList.filter(res => {
          return res.plane_size == this.airSize;
        });
      }
      this.$emit("toFliter", newList);
    },
    //6.撤销筛选
    handleFiltersCancel() {
      this.airport = "";
      this.flightTimes = "";
      this.company = "";
      this.airSize = "";
      this.runFilters();
      console.log("撤销");
    }
  }
};
</script>

<style lang="less" scoped>
.filters {
  margin-bottom: 20px;
  .filters-top {
    > div {
      /deep/ .el-select {
        margin-left: 10px;
      }
    }
  }
  .filter-cancel {
    margin-top: 10px;
  }
}
</style>